import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const Bar = ({ title, xData, yData, style }) => {
  const domRef = useRef();

  function initChart(title, xData, yData) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(domRef.current);
    // 绘制图表
    myChart.setOption({
      title: {
        text: title,
      },
      tooltip: {},
      xAxis: {
        data: xData,
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: yData,
        },
      ],
    });
  }

  useEffect(() => {
    initChart(title, xData, yData);
  }, [title, xData, yData]);

  return <div ref={domRef} style={style}></div>;
};

export default Bar;
